<template>
  <div class="demo-date-picker">
    <div class="block">
      <el-date-picker style="height: 35px;" v-model="value2" type="daterange" unlink-panels range-separator="-"
        start-placeholder="请选择日期" end-placeholder="请选择日期" :shortcuts="shortcuts" :size="size" @change="pickerData" />
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const size = ref<'default' | 'large' | 'small'>('large')
const value2 = ref('')

const shortcuts = [
  {
    text: '今日',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - start.getDay())
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本季度',
    value: () => {
      const end = new Date()
      const start = new Date()
      const month = start.getMonth()
      start.setMonth(Math.floor(month / 3) * 3)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '本年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(0)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      return [start, end]
    },
  },
  {
    text: '去年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setFullYear(start.getFullYear() - 1)
      start.setMonth(0)
      start.setDate(1)
      start.setHours(0, 0, 0, 0)
      end.setFullYear(end.getFullYear() - 1)
      end.setMonth(11)
      end.setDate(31)
      end.setHours(23, 59, 59, 999)
      return [start, end]
    },
  },
]
const pickerData = (val: any) => {
  console.log('ttt', val);

}
</script>

<style lang="scss" scoped>
.demo-date-picker {
  margin-left: 10px;
  margin-top: 10px;
}
</style>